<template>
  <div class="comment-container">
    <div class="comment-item clearfix" v-for="(item,index) of suggestList" :key="index">
      <a class="comment-header"></a>
      <div class="comment-main">
        <div class="commenter">
          <!--用户昵称-->
          <span>{{item.userName}}</span>
          <!--意见时间-->
          <time>{{item.createTime}}</time></div>
        <!--意见的内容-->
        <div class="comment-content">{{item.suggestion}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import {getSuggestions} from '@/api/post/suggestion'
import bus from '@/assets/js/eventBus'
export default {
  name: 'CommentComponent',
  // 注入子组件里的reload方法
  inject: ['reload'],
  data () {
    return {
      suggestList: ''
    }
  },
  mounted () {
    this.init()
    let _this = this
    bus.$off('refleshList')
    bus.$on('refleshList', param => {
      console.log('参数：', param)
      _this.reload()
    })
  },
  methods: {
    /**
     * 初始化内容
     */
    init: async function () {
      let params = {
        indexPage: 1,
        perPage: 20
      }
      const promise = await getSuggestions(params)
      if (promise.status === 200) {
        this.suggestList = promise.data.result
      }
      console.log(promise)
    }
  }
}
</script>

<style lang="stylus" scoped>
.comment-container
  width 100%
  min-height 500px
  .comment-item
    width calc(100% - 20px)
    min-height:100px
    margin-top 15px
    padding 10px
    border-bottom 1px solid #eee
    .comment-header
      display block
      float left
      width 50px
      height 50px
      border:1px solid #7e8c8d
      border-radius 50%
      margin-left 10px
      background-image url("./icon/icon-header.jpg")
      background-repeat no-repeat
      background-position left center
      background-size 100% 100%
    .comment-main
      float right
      width calc(100% - 72px)
      height 100%
      margin-left 10px
      .commenter
       font-weight bold
       line-height 30px
       span
         font-size 16px
         color: #666
         font-weight bold
       time
          float right
          margin-left 30px
          color: #257cde
          font-size 12px
      .comment-content
        line-height 20px
        letter-spacing 1px
        text-indent 2rem
        color: #666
        font-size 14px
</style>
